import React, { Fragment } from 'react';
import { Card, Form, Input, Select, Button } from 'antd';
import { withPropsAPI } from 'gg-editor';
import upperFirst from 'lodash/upperFirst';

const { Item } = Form;
const { Option } = Select;
const { TextArea } = Input;

const inlineFormItemLayout = {
  labelCol: {
    sm: { span: 5 },
  },
  wrapperCol: {
    sm: { span: 19 },
  },
};

let lastSelectedItem;

class DetailForm extends React.Component {
  formRef = React.createRef();
  get item() {
    const { propsAPI } = this.props;

    return propsAPI.getSelected()[0]
      ? propsAPI.getSelected()[0]
      : lastSelectedItem;
  }

  componentWillMount() {
    // fix edit node details
    this.operationDetail();
  }

  operationDetail = () => {
    const { propsAPI } = this.props;
    const currentPage = propsAPI.editor.getCurrentPage().getGraph();
    currentPage.on('node:click', (e) => {
      const { label, stateId, stateType, stateProps } = e.item.getModel();
      console.log(
        label + stateId + stateType + JSON.stringify(stateProps, null, 2),
      );
      lastSelectedItem = e.item;
    });
    currentPage.on('edge:click', (e) => {
      const {
        label = '',
        shape = 'flow-smooth',
        stateProps,
      } = e.item.getModel();
      lastSelectedItem = e.item;
      form.setFieldsValue({
        label,
        shape,
        stateProps: JSON.stringify(stateProps, null, 2),
      });
    });
  };

  handleSubmit = (e) => {
    if (e && e.preventDefault) {
      e.preventDefault();
    }

    const { propsAPI } = this.props;

    const form = this.formRef.current;

    console.log(form);

    const { executeCommand, update } = propsAPI;

    setTimeout(() => {
      const item = this.item;

      if (!item) {
        return;
      }

      const values = form.getFieldsValue();

      console.log(values);

      if (values.stateProps) {
        values.stateProps = JSON.parse(values.stateProps);
      }

      lastSelectedItem = item;

      executeCommand(() => {
        update(item, {
          ...values,
        });
      });
    }, 0);
  };

  renderEdgeShapeSelect = () => {
    return (
      <Select onChange={this.handleSubmit}>
        <Option value="flow-smooth">Smooth</Option>
        <Option value="flow-polyline">Polyline</Option>
        <Option value="flow-polyline-round">Polyline Round</Option>
      </Select>
    );
  };

  renderNodeDetail = () => {
    const { label, stateId, stateType, stateProps } = this.item.getModel();

    console.log(stateProps);

    setTimeout(() => {
      this.formRef.current.setFieldsValue({
        stateProps: JSON.stringify(stateProps, null, 2),
      });
    }, 10);

    return (
      <Fragment>
        <Item
          label="Label"
          {...inlineFormItemLayout}
          name="label"
          initialValue={label}
        >
          <Input onBlur={this.handleSubmit} />
        </Item>
        <Item
          label="Id"
          {...inlineFormItemLayout}
          name="stateId"
          initialValue={stateId}
        >
          <Input onBlur={this.handleSubmit} />
        </Item>
        <Item
          label="Type"
          {...inlineFormItemLayout}
          name="stateType"
          initialValue={stateType}
        >
          <Input readOnly={true} />
        </Item>
        <Item
          label="Props"
          {...inlineFormItemLayout}
          name="stateProps"
          initialValue={JSON.stringify(stateProps, null, 2)}
        >
          <TextArea onBlur={this.handleSubmit} rows={16} />
        </Item>
        <a
          target="_blank"
          style={{ float: 'right' }}
          href="http://seata.io/zh-cn/docs/user/saga.html"
        >
          How to fill the properties?
        </a>
      </Fragment>
    );
  };

  renderEdgeDetail = () => {
    const {
      label = '',
      shape = 'flow-smooth',
      stateProps,
    } = this.item.getModel();

    return (
      <Fragment>
        <Item
          label="Label"
          {...inlineFormItemLayout}
          name="label"
          initialValue={label}
        >
          <Input readOnly={true} />
        </Item>
        <Item
          label="Shape"
          {...inlineFormItemLayout}
          name="shape"
          initialValue={shape}
        >
          {this.renderEdgeShapeSelect()}
        </Item>
        <Item
          label="Props"
          {...inlineFormItemLayout}
          name="stateProps"
          initialValue={JSON.stringify(stateProps, null, 2)}
        >
          <TextArea onBlur={this.handleSubmit} rows={16} />
        </Item>
        <a
          target="_blank"
          style={{ float: 'right' }}
          href="http://seata.io/zh-cn/docs/user/saga.html"
        >
          How to fill the properties?
        </a>
      </Fragment>
    );
  };

  renderGroupDetail = () => {
    const { label = 'New Group' } = this.item.getModel();

    return (
      <Item
        label="Label"
        {...inlineFormItemLayout}
        name="label"
        initialValue={label}
      >
        <Input onBlur={this.handleSubmit} />
      </Item>
    );
  };

  render() {
    const { type } = this.props;

    if (!this.item) {
      return null;
    }

    return (
      <Card type="inner" size="small" title={upperFirst(type)} bordered={false}>
        <Form ref={this.formRef} onSubmit={this.handleSubmit}>
          {type === 'node' && this.renderNodeDetail()}
          {type === 'edge' && this.renderEdgeDetail()}
          {type === 'group' && this.renderGroupDetail()}
        </Form>
      </Card>
    );
  }
}

export default withPropsAPI(DetailForm);
